<template>
    <div class="component">
        <!--面包屑导航-->
        <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '表单', '部件']" :showSystem="false" showBack></Breadcrumb>

        <!--table-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader" style="justify-content: flex-end">
                <p class="tit" style="margin-right: auto;">部件列表</p>
                <el-button type="primary" icon="el-icon-plus" @click="openAdd">添加部件</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="formPartId" style="width: 100%">
                <!--<el-table-column label="部件ID" prop="formPartId"></el-table-column>-->
                <el-table-column label="部件名称" prop="formPartName"></el-table-column>
                <el-table-column label="部件类型" prop="partType.displayName"></el-table-column>
                <el-table-column label="关联模型" prop="modelName"></el-table-column>
                <el-table-column label="是否有工具条" prop="isToolBar" :formatter="formatter"></el-table-column>
                <el-table-column label="所属表单" prop="formName"></el-table-column>
                <el-table-column label="位置左" prop="left"></el-table-column>
                <el-table-column label="位置右" prop="right"></el-table-column>
                <el-table-column label="位置上" prop="tpo"></el-table-column>
                <el-table-column label="位置下" prop="bottom"></el-table-column>
                <el-table-column label="操作" width="250" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="toPartField(scope.row)">部件项</el-button>
                        <el-button size="mini" @click="toPartBtn(scope.row)">部件按钮</el-button>
                        <el-button slot="reference" size="mini" type="danger" @click="openDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button v-if="list.list.length>0" icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getPartList"></el-button>
            </el-pagination>
        </el-card>

        <!--添加表单-->
        <el-drawer
                title="添加Form"
                :show-close="false"
                :with-header="false"
                :before-close="cancelForm"
                :visible.sync="showAdd"
                direction="rtl"
                ref="drawer"
        >
            <div class="drawerTitle">{{type === 1 ? '新增部件' : type === 2 ? '编辑部件' : '删除部件'}}</div>
            <div class="add-drawer">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item :label-width="formLabelWidth" label="删除提示" v-if="type===3">
                        <el-input v-model="msg" type="textarea" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="关联模型" prop="modelName">
                        <el-select v-model="form.modelId" style="width: 100%;" placeholder="请选择" :disabled="type === 2 || type === 3">
                            <el-option v-for="item in modelsList" :key="item.modelId" :label="item.modelName" :value="item.modelId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="部件名称">
                        <el-input v-model="form.formPartName" autocomplete="off" :disabled="type === 3"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="部件类型" prop="partType">
                        <el-select v-model="form.partType" style="width: 100%;" placeholder="请选择" :disabled="type === 2 || type === 3">
                            <el-option label="Panel" value="0"></el-option>
                            <el-option label="Grid" value="1"></el-option>
                            <!--<el-option label="Graph" value="2"></el-option>-->
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属表单">
                        <el-input v-model="form.formName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属组件">
                        <el-input v-model="form.componentName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属模块">
                        <el-input v-model="form.moduleName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属项目" v-if="componentType==1">
                        <el-input v-model="form.solutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属产品">
                        <el-input v-model="form.topSolutionName" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="IndexNo">
                        <el-input v-model="form.indexNo" :disabled="type!==1"></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="位置左">
                        <el-input v-model="form.left" :disabled="type!==1"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="位置右">
                        <el-input v-model="form.right" :disabled="type!==1"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="位置上">
                        <el-input v-model="form.top" :disabled="type!==1"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="位置下">
                        <el-input v-model="form.bottom" :disabled="type!==1"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否有工具条">
                        <el-switch v-model="form.isToolBar" :disabled="type === 3"></el-switch>
                    </el-form-item>
                </el-form>

                <div class="add-drawer_foot">
                    <el-button @click="cancelForm()">取 消</el-button>
                    <el-button plain icon="el-icon-delete" @click="reset()" v-if="type !== 3">清除</el-button>
                    <el-button type="primary" @click="ok('ruleForm')" :loading="addLoading">{{ addLoading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {request, url} from "@/api/request";

    export default {
        name: "ComponentPart",
        components: {
            Breadcrumb
        },
        data() {
            return {
                formId:'',
                componentID:'',
                list:{
                    list:[],
                },
                currentPage:1,
                rows:10,
                modelsList:[],
                FormDefault:{},

                addLoading:false,
                showAdd:false,
                formLabelWidth: '100px',
                type:1,//1新增 2编辑 3删除
                form:{
                    isToolBar:true,
                },
                rules:{
                    modelId: [
                        { required: true, message: '必选', trigger: 'change' },//change
                    ],
                    partType: [
                        { required: true, message: '必选', trigger: 'change' },
                    ],
                },
                msg:'',
            };
        },
        props: {
            componentType: {
                type: Number,
                default: 1,//1组件，2产品
            },
        },
        created() {

        },
        mounted() {
            let obj = this.getLocationParams(location.href.split('?')[1])
            obj.formId && (this.formId = obj.formId);
            obj.componentID && (this.componentID = obj.componentID);
            this.getPartList();
        },
        methods: {
            getPartList(){
                request(`${url.partList}/${this.formId}`,{
                    // loading:1,
                    data:{
                        currentPage:this.currentPage,
                        rows:this.rows,
                    }
                },res=>{
                    this.list = res.data;
                })
            },
            formatter(row, column, cellValue, index){
                return cellValue ? '是' : '否';
            },
            changePage(e){
                this.currentPage = e;
                this.getPartList();
            },
            //打开添加表单
            openAdd(){
                this.type = 1;
                this.showAdd = true;
                this.reset();
                //请求关联主模型和所属组件等
                this.getSelectPartList();
                this.getPartDefault();
            },
            openDel(index, row){
                this.type = 3;
                this.showAdd = true;
                this.reset();
                this.form = {
                    ...row,
                    isToolBar:!!row.isToolBar,
                    partType:row.partType.code+'',
                }
                request(`${url.formpartsDeleteCheck}/${row.formPartId}`,{
                    // method:'delete',
                },res=>{
                    this.msg = res.message;
                })
                this.getSelectPartList();
                this.getPartDefault();
            },
            ok(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        if (this.type === 1) {
                            this.add();
                        }
                        // else if(this.type === 2){
                        //     this.edit();
                        // }
                        else if(this.type === 3){
                            this.del();
                        }
                    }
                    else {
                        this.$message({
                            message:'有未完成的必填项！',
                            type:'warning',
                        })
                        return false;
                    }
                });
            },
            getSelectPartList(){
                request(`${url.getSelectPartList}/${this.componentID}`,{
                    data:{
                        solutionId:this.$store.state.solution_global.solutionId,
                    }
                },res=>{
                    this.modelsList = res.data;
                })
            },
            getPartDefault(){
                request(`${url.getPartDefault}/${this.formId}`,{},res=>{
                    this.form = {
                        ...this.form,
                        formName:res.data.formName,
                        componentName:res.data.componentName,
                        moduleName:res.data.moduleName,
                        solutionName:res.data.solutionName,
                        topSolutionName:res.data.topSolutionName,
                        // ...res.data,
                    };
                })
            },
            cancelForm() {
                this.addLoading = false;
                this.showAdd = false;
                this.reset();
            },
            add(){
                this.form.isToolBar ? this.form.isToolBar = 1 : this.form.isToolBar = 0;
                request(`${url.savePart}`,{
                    method:'POST',
                    data:{
                        ...this.form,
                        formId:this.formId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getPartList();
                },()=>{
                    this.addLoading = false;
                })
            },
            del(){
                request(`${url.savePart}/${this.form.formPartId}`,{
                    method:'delete',
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getPartList();
                },()=>{
                    this.addLoading = false;
                })
            },
            reset() {
                this.form = {
                    ...this.form,
                    isToolBar: true,
                    modelId:'',
                    formPartName:'',
                    partType:'',
                };
            },
            toPartField(row){
                console.log(row);
                this.$router.push({path:`PartField?formPartId=${row.formPartId}`})
            },
            toPartBtn(row){
                console.log(row);
                this.$router.push({path:`PartBtn?formPartId=${row.formPartId}`})
            },
        }
    };
</script>

<style scoped>
    .add-drawer{
        padding:20px 20px 20px 15px;
    }
    .add-drawer_foot{
        text-align: center;
    }
    .drawerTitle {
        line-height: 70px;
        font-size: 20px;
        margin-left: 30px;
    }

    .tree {
        margin-left: 30px;

    }
    .tabHeader{
        display: flex;
        align-items: center;
    }
    .tit{
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }
    .box-card{
        margin-bottom: 15px;
    }

</style>
